<template>
	<view class="generate text-white pb-safe-area">
		<view class="p-16">
			<view class="flex flex-x-space-between flex-y-center">
				<view class="flex flex-column">
					<view class="flex flex-y-center gap-4">
						<y-title>我的算力</y-title>
						<text class="iconfont icon-wenhao fs-24"></text>
					</view>
					<text class="fs-36">{{USERINFO?.point}}</text>
				</view>
				<view class="gradient  py-8 px-12 pr-4 round-30 fs-14 " @click="$page.open('/pages/bill/point')">
					算力明细
					<text class="iconfont icon-fanhui1 fs-14"></text>
				</view>
			</view>



			<y-title class="mt-30">选择套餐</y-title>
			<view class="mt-12 grid-columns-3 gap-14">
				<view v-for="item in packageList" :key="item.id"
					class="round-8 h-100 flex flex-column gap-4 flex-center  border relative mt-12"
					:class="getPackageClass(item)" @click="selectPackage(item)">
					<text class="fs-20">{{ item.point }}算力</text>
					<text :class="item.id === selectedPackage.id ? 'text-green' : 'text-grey'">
						￥{{ item?.price }}
					</text>
					<view v-if="item.give>0"
						class="absolute left--1 h-30 top--15  round-right-30 round-left-8 fs-14 px-12  flex flex-center text-black"
						:class="item.id==selectedPackage.id ? 'bg-blue':'bg-grey-2'">
						送{{item.give}}算力</view>
				</view>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="mt-20 overflow-hidden" v-if="WEBCONFIG?.wx_ad_status.includes('wx_video_new')">
				<ad :unit-id="WEBCONFIG?.wx_video_new" ad-theme="white">
				</ad>
			</view>
			<!-- #endif -->

			<view class="w-p-100 gradient py-14 round-12 text-center mt-30" @click="submit">
				{{getText}}
			</view>
			<view class="text-center mt-10 text-grey fs-14">
				我已阅读并同意<text class="text-blue-1 "
					@click="$page.open('/pages/article/index?name=recharge')">《充值协议》</text>
			</view>
		</view>
		<y-order-status ref="statusPopup" @result="payResult"></y-order-status>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $page ,$tool} from '@/utils'
	import { pay } from '@/utils/pay.js'
	import { useWebConfigStore, useRefs, useUserStore } from '@/stores'
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const selectedPackage = ref()
	const packageList = ref([])
	const keyPopup = ref(null)
	const platform = uni.getDeviceInfo().platform
	const statusPopup = ref(null)
	onLoad(() => {
		getList()
	})


	const getText = computed(() => {
		if (platform == 'ios' && WEBCONFIG?.value?.ios_status == 1) {
			return '卡密兑换';
		}
		return `￥${selectedPackage?.value?.price} 立即充值`;
	})
	const payResult = () => {
		setTimeout(() => {
			$page.redirect('/pages/user/index');
		}, 300)
	}


	const getList = () => {
		$http.get('Plans/getList').then(res => {
			packageList.value = res.data
			if (packageList.value.length > 0) {
				selectedPackage.value = packageList.value[0]
			}
		})
	}
	const selectPackage = (item) => {
		selectedPackage.value = item
	}
	const submit = async () => {
		if (platform == 'ios' && WEBCONFIG?.value.ios_status == 1) {
			return keyPopup.value.open();
		}
		let source = 'official';
		// #ifdef MP-WEIXIN
		source = 'applet'
		// #endif
		try {
			uni.showLoading({
				title: '请稍后...'
			})
			const res = await $http.post('Order/createPlansOrder', {
				id: selectedPackage.value.id,
				source: source
			});
			console.log(res)
			await pay(source, res.data.pay_data);
			statusPopup.value.start(res.data.order_id, 1);
		} catch (err) {
			console.error(err)
			$tool.toast('支付失败');
		}

	}
	const getPackageClass = (item) => {
		return item.id === selectedPackage.value.id ?
			'text-blue se' :
			'bg-black-1 border-black-1'
	}
</script>

<style scoped>
	.fs-36 {
		font-weight: 600;
		font-size: 72rpx;
	}

	.se {
		background: rgba(23, 22, 48, 0.08);
	}

	.border {
		border-width: 2rpx;
		border-style: solid;
	}
</style>